export default {
    name: "gsTable3",
    props: {
      className:String,
        tableHead:Array,
        tableData:Array
    },
    //<div class="td" >{column[key]}</div>
    render(h) {
      return (
        <div class="b-table" style="border: 1px solid #e7e7eb; margin:15px;">
          <div class="table-wrapper has-mobile-cards has-sticky-header table-container" >
            <table class="table table is-hoverable">
              <thead >
                <tr>{
                  this.tableHead.map((column) => (
                    <th  style="border: 1px solid #e7e7eb">{column.name}</th>
                  ))
                }
                </tr>
              </thead>
              <tbody ref="tbody">{
                this.tableData.map((column,i) => (
                  <tr>{
                    Object.keys(column).map((key) => (
                      <td >
                        { this.ifrender(key) ? h('div',{
                            class:{td:true},
                            props: {vHtml:column[key]},
                            // attrs: {'v-html':column[key]}
                            domProps:{innerHTML:column[key]}
                          }):
                          h('input',{
                            // class:{input:true},
                            domProps:{
                              value:column[key]
                            },
                            
                            on: {
                              input: (event) => {
                                this.input(event.target.value,key,i)
                                // self.$emit('input',event.target.value)
                              }
                          }
                          })
                        }
                      </td>
                    ))
                  }</tr>
                ))
              }
              </tbody>
            </table>
  
          </div>
        </div>
      )
    },
    data(){
      return {
        focus:Object
      }
    },
    computed: {
      tbody() {
        return this.$refs.tbody;
      },
    },
    methods:{
      input(val,key,i){
        console.log(key)
        this.tableData[i][key] = val
        // for (let index = 0; index < this.tableData.length; index++) {
        //   this.tableData[index][key] = val
          
        // }
      },
      ifrender(column){
        for (let index = 0; index < this.tableHead.length; index++) {
          if(this.tableHead[index].value == column){
  
            if(this.tableHead[index].template){
              return false
            }else{
              return true
            }
          }
          
        }
      },
      addEventListener(){
        
        const {tbody} = this.$refs
        const trs = tbody.childNodes;
        const that = this
        for (let index = 0; index < trs.length; index++) {
          let tds = trs[index].childNodes
          for (let i = 0; i < tds.length; i++) {
            (function (td){
              td.addEventListener('click', that.handleVisibilityChange, false);
              td.addEventListener('dblclick', that.intemplate, false);
            })(tds[i])
            
          }
          
          
        }
      },
      handleVisibilityChange(child){
        this.tdhandle(child.target)
      },
      tdhandle(target){
        if(target.tagName == "TD"){
          target.style = "border:1px solid blue !important;align:right"
          this.focus.style=""
          target.style = "border:1px solid blue !important;align:right"
          // target.setAttribute('align','right')
          this.focus = target
        }else{
          this.tdhandle(target.parentNode)
        }
      },
      intemplate(child){
        this.intpl(child.target)
      },
      intpl(target){
        if(target.tagName == "DIV"){
          let itp = document.createElement('input')
          itp.setAttribute('type','text')
          itp.setAttribute('autocomplete','on')
          itp.className="input"
          
          // target.appendChild(itp)
          document.replaceChild(itp,target)
          // target.replaceChild(itp)
          // let divs = target.childNodes
          // for (let index = 0; index < divs.length; index++) {
          //   if(divs[index].tagName == "DIV"){
          //     console.log(divs[index])
          //   }
            
          // }
        }else{
          // this.intpl(target.parentNode)
        }
      }
    },
    mounted() {
      this.addEventListener()
        
      
    },
    model: {
      event: 'ababab'
    },
    
  }
  